<template>
  <div class="player">
    <div class="left">
      <img class="disc" src="../assets/img/disc.png" alt="" />
      <img class="cover" src="../assets/img/cover.png" alt="" />
    </div>
    <div class="right">
      <div class="title">
        <img src="../assets/img/tag.png" alt="" /><span>放个大招给你看</span>
      </div>
      <div class="singer">歌手: <span>尼古拉斯赵四</span></div>
      <div class="album">所属专辑: <span>我就是我</span></div>
      <audio class="audio" controls src=""></audio>
      <ul class="lyric-container">
        <li class="lyric">难以忘记</li>
        <li class="lyric">初次见你</li>
        <li class="lyric">那双迷人的小眼睛</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      //单曲名字:
      musicname:'',
      //歌手名
      singname:"",
      //专辑
      zjname:'',
      //音乐地址
      musicSrc:'',
      //歌词
      lysic:'',
      //图片
      impSrc:'',
      //歌曲id，
      musicId:''
    }
  },
  //生命周期钩子函数 创建 一般在这里 我们会进行 数据读取 数据初始化 发送网络请求
  async created(){
      console.log(this.$route.params.id);
      this.musicId = this.$route.params.id
      let res = await this.$axios.get("https://autumnfish.cn/song/detail?ids=" + this.musicId)
      console.log(res);
  }
};
</script>

<style scoped src="../assets/css/player.css"></style>